<template>
	<view>
		<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;margin: 20rpx 20rpx 120rpx 20rpx">
			<view style="border-radius: 20rpx;margin: 10rpx 20rpx 10rpx">
				<u-swiper height="150" :list="housePicList" indicator :autoplay="true" circular @click="swiperClick"></u-swiper>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
				<view style="width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
					<image style="width: 100%;height: 100%;" :src="avatarPic(houseDataDetail.avatar)"></image>
				</view>
				<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-size: 28rpx;">
						{{houseDataDetail.contacts}}
					</view>
					<view style="font-size: 26rpx;color: #909399;">
						{{houseDataDetail.telephone}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view style="display: flex;flex-direction: column;padding: 30rpx;">
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">售房标题</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseTitle}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">房屋性质</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseNature?'出售':'出租'}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">房屋地址</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseAddress}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">房屋面积</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseArea + '㎡'}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">户型</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseType}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">楼层</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseHeight  + '层'}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">朝向</view>
					<view style="font-size: 28rpx;">{{changeToward(houseDataDetail.houseToward)}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">装修类型</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseMount?'普装':'精装'}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">售价</view>
					<view style="font-size: 28rpx;">{{houseDataDetail.houseNature == 0 ? houseDataDetail.housePrice + '月租' : houseDataDetail.housePrice + '万元'}}</view>
				</view>
			</view>
			
	
		</view>
		<!-- 收藏  拨打电话 -->
		<view class="buttom">
			<view class="collect-btn" @click="clickCollect">
				<u-icon name="star" size="24" :color="collectStatus?'#ffaa00':''"></u-icon>
				<text>{{collectStatus?'已收藏':'收藏'}}</text>
			</view>
			<view class="callPhone" @click="call(jobHuntDataDetail.telephone)">
				<u-icon name="phone" size="24" color="#fff"></u-icon>
				<text>拨打电话</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	import {getHouseDetail,getHouseCollectStatus,houseCollectCancel,houseCollect} from '../../config/api.js'
	import {mapGetters} from 'vuex'
	// const baseUrl = 'http://localhost:8080'
	export default{
		data(){
			return {
				id:'',
				houseDataDetail:{},
				collectStatus:'',
				tempPicList:[],
				housePicList:[]
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getHouseDetail()
		},
		onShow() {
			this.getHouseDetail()
		},
		computed: {
				...mapGetters(['getIsLogin','getBaseUrl']),
		},
		methods:{
			// 头像处理
			avatarPic(pic){
				if(pic){
					return pic.includes('http')?this.houseDataDetail.avatar:this.getBaseUrl+this.houseDataDetail.avatar
				}else{
					return pic
				}
			},
			// 请求数据
			getHouseDetail(){
				getHouseDetail({id:this.id}).then(res =>{
					this.houseDataDetail = res.data.data
					this.tempPicList = this.houseDataDetail.housePic.split(",");
					this.housePicList = this.tempPicList.map((item,index)=>{
						return this.getBaseUrl + item
					});
					// 获取收藏状态
					this.getStatus()
				})
			},
			getStatus(){
				getHouseCollectStatus({id:this.id}).then(res =>{
					this.collectStatus = res.data.data	
				})
			},
			// 收藏
			clickCollect(){
				if(this.getIsLogin){
					if(this.collectStatus){
						// 取消收藏
						houseCollectCancel({id:this.id}).then(res=>{
							this.collectStatus=0
							this.houseDataDetail.collect--
							this.$refs.uToast.show({
								type:'warning',
								message:'取消收藏成功'
							})
						})
					}else{
						// 收藏
						houseCollect({id:this.id,collectType:'招聘'}).then(res=>{
							this.collectStatus=1
							this.houseDataDetail.collect++
							this.$refs.uToast.show({
								type:'success',
								message:'收藏成功'
							})
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
			},
			// 点击图片
			swiperClick(i) {
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.housePicList
				})
			},
			changeToward(e){
				if(e == 0){
					return '朝南'
				}
				if(e == 1){
					return '朝东'
				}
				if(e == 2){
					return '朝西'
				}
				if(e == 3){
					return '朝北'
				}
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">

	
	.buttom{
		display: flex;
		position: fixed;   // 固定定位
		flex-wrap: wrap;  //让弹性盒元素在必要的时候拆行
		justify-content: space-between;
		bottom: 0;
		box-shadow: 0 2px 2px rgba(10, 16, 20, 0.54), 0 0 2px rgba(10, 16, 20, 0.52);
		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;	
		.collect-btn{
			justify-content: center;
			align-items: center;
			display: flex;
			width: 50%;
			background-color: #fff;
		}
		.callPhone{
			width: 50%;
		    display: flex;
			flex-direction: row;  //主轴方向row 水平
			align-items: center;
			justify-content: center;
			color:#fff;
			background-color: #20C3FE;
		}
	}
</style>